<template>
  <div :data-linear-cid="cid" class="chart" />
</template>

<script>
/** *
   * 可以考虑每个画一个图分别是独立的chart实例
   * https://www.echartsjs.com/examples/editor.html?c=bar-y-category-stack
   */
// import 'echarts/lib/chart/bar'
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/title'
// import 'echarts/lib/component/legend'
// import echarts from 'echarts'
import { ChartMixin } from '../mixin'
export default {
  name: 'LinearGradientBar',
  mixins: [ChartMixin],
  props: {
    data: {
      type: [Array],
      required: true
    },
    color0: {
      type: [String],
      required: false,
      default: 'rgba(194,233,251,1)'
    },
    color1: {
      type: [String],
      required: false,
      default: 'rgba(161,196,253,1)'
    },
    opacity: {
      type: [Number],
      required: false,
      default: 1
    },
    orient: {
      type: [Boolean],
      required: false,
      default: true
    },
    sub: {
      type: [Number],
      required: false,
      default: 0
    },
    subColor0: {
      type: [String],
      required: false,
      default: ''
    },
    subColor1: {
      type: [String],
      required: false,
      default: ''
    }
  },
  computed: {
    labels() {
      return this.data.map((v) => {
        return v['label']
      })
    },
    values() {
      return this.data.map((v) => {
        return v['value']
      })
    },
    realSubColor0() {
      if (this.subColor0) {
        return this.subColor0
      }
      return this.color0
    },
    realSubColor1() {
      if (this.subColor1) {
        return this.subColor1
      }
      return this.color1
    }
  },
  watch: {
    data(newData) {
      this.more()
    }
  },
  methods: {
    more() {
      // 应该获取数据 重新渲染图表
      this.setOptions()
    },
    setOptions() {
      const xAxisData = {
        // show: false,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
      const yAxisData = {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }

      if (this.orient) {
        xAxisData['show'] = false
        yAxisData['data'] = this.labels
      } else {
        yAxisData['show'] = false
        xAxisData['data'] = this.labels
      }
      this.chart.setOption({
        title: {
          text: ''
        },
        tooltip: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: xAxisData,
        yAxis: yAxisData,
        series: [{
          name: '人数',
          type: 'bar',
          data: this.data.map((v, index) => {
            const value = {
              name: v['label'],
              value: v['value']
            }
            if (this.sub - index > 0) {
              value['itemStyle'] = {
                normal: {
                  opacity: this.opacity,
                  color: new this.$chart.graphic.LinearGradient(
                    0, 1, 1, 0,
                    [
                      { offset: 0, color: this.realSubColor0 },
                      { offset: 1, color: this.realSubColor1 }
                    ]
                  )
                }
              }
            } else {
              value['itemStyle'] = {
                normal: {
                  opacity: this.opacity,
                  color: new this.$chart.graphic.LinearGradient(
                    0, 1, 1, 0,
                    [
                      { offset: 0, color: this.color0 },
                      { offset: 1, color: this.color1 }
                    ]
                  )
                }
              }
            }
            return value
          }),
          barWidth: 32
        }]
      })
    }
  }
}
</script>

<style scoped>
  .chart {
    width: 600px;
    height: 400px;
  }
</style>
